<template>
  <!-- user模块下公共样式 -->
  <div class="spa-con">
    <div class="box-com">
      <slot name="icon" class="icon-box">
      </slot>
      <slot name="name" class="name"></slot>
      <img src="imgs/icon-right.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpaCom'
}
</script>

<style lang="less" scoped>
.box-com {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  line-height: 100px;
  padding: 0 56px 0 110px;
  border-bottom: 1px solid #ccc;
  .icon-box {
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  img {
    width: 40px;
    height: 40px;
  }

  span {
    display: inline-block;
    width: 100%;
  }
}
</style>
